/**
* Created by zhanheng on 2017/3/1.
*
*/
<template>
  <div class="course-list">
    <ict-titlebar v-el:titlebar :left-options="titlebarOptions">全部课程</ict-titlebar>
    <scroller :lock-x="true" scrollbar-y v-ref:scroller :height="scrollerHeight">
      <div>
        <div class="course-group">
          <div class="course-list" v-for="course in pyramidCourseList" v-touch:tap="goToCourseDetail(course)">
            <img class="course-list-img"
                 v-bind:src=course.pic>
            <div class="course-list-info">
              <p class="course-list-title">{{course.title}}</p>
              <p class="course-list-price">￥{{course.price}}</p>
            </div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
  import IctTitlebar from '../../components/IctTitleBar.vue'
  import Scroller from 'vux/scroller'
  import {pyramidActions, mineActions} from '../../vuex/actions'
  import {pyramidGetters, mineGetters, userGetters} from '../../vuex/getters'
  export default {
    vuex: {
      getters: {
        pyramidCourseList: pyramidGetters.pyramidCourseList,
        isSpire: mineGetters.isSpire,
        isLogin: userGetters.isLogin
      },
      actions: {
        loadPyramidCourseList: pyramidActions.loadPyramidCourseList,
        loadIsSpire: mineActions.loadIsSpire
      }
    },
    ready () {
      this.loadPyramidCourseList().then(this.setScrollerHeight)
    },
    data () {
      return {
        spireId: 0,
        scrollerHeight: '0px',
        titlebarOptions: {
          showBack: true,
          disabled: false,
          callback: this.goBack
        }
      }
    },
    route: {
      data () {
        this.spireId = this.$route.query.spireid || window.localStorage.getItem('spireid')
        window.localStorage.removeItem('spireid')
        if (this.isLogin) {             //如果用户已登录，判断是否有鼓励师资格
          this.loadIsSpire()
        }
        this.setScrollerHeight()
      }
    },
    methods: {
      goBack () {
        this.$route.router.replace('/main')
      },
      /**
       * 设置滚动高度
       */
      setScrollerHeight () {
        const me = this
        setTimeout(function () {
          me.scrollerHeight = (window.document.body.offsetHeight - me.$els.titlebar.clientHeight) + 'px'
          me.$nextTick(() => {
            me.$refs.scroller.reset({
            top: 0
          })
        })
        }, 100)
      },
      goToCourseDetail (course) {  //获取课程细节
        this.$route.router.go(`/pyramid-pay-ST?stpid=${course.productId}&piid=${course.id}&spireid=${this.spireId}`)
      }
    },

    components: {
      IctTitlebar,
      Scroller
    }
  }

</script>
<style lang="less">
  .course-list{
    p{
      margin: 0;
    }
    .course-group{
      position: relative;
      background: #fff;
      overflow: hidden;
      border-bottom: 0.5rem solid #f0eff5;
    }
    .course-list{
      height: 86/20rem;
      background: #fff;
      overflow: hidden;
      border-bottom: 1px solid #f0eff5;
      &-img{
        width: 6.5rem;
        height: 3.5rem;
        margin: 0.5rem 15/40rem 0.5rem 30/40rem;
        vertical-align: top;
      }
      &-info{
        position: relative;
        display: inline-block;
        margin: 0.5rem 30/40rem 0.5rem 0;
        width: 360/40rem;
        vertical-align: top;
        line-height: 1rem;
      }
      &-title{
        color: #000;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-price{
        text-align: left;
        padding-top: 60/40rem;
        color: #ff5b45;
        font-size: 0.7rem;
        right: auto;
      }
    }
  }
</style>
